<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>
<html >
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Login|prepaid</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/Charging/login.css" />
    <style>
        body{
           /*background: url("${pageContext.request.contextPath}/img/Charging/content_bg.png")no-repeat;*/
           /*background: url("${pageContext.request.contextPath}/img/Charging/fengye.png")no-repeat;//没用，位于页面左上角*/
           /* position: fixed;
            width: 100%;
            height: 100%;
            background: url("${pageContext.request.contextPath}/img/Charging/content_bg.png")no-repeat;
            background-size: 100%;*/

        }
        p{
            color: white;
            font-size: 16px;
        }
        .signup_forms{
            position: relative;
            left: 1%;
            top: -20px;
            box-shadow: #074898 7px 10px 20px;
        }

        .from-title{
            text-align: center;
            margin: 100px auto;
        }
        span{
            position: relative;
            text-align: center;
            color: white;
            /*font-family: 华文楷体;*/
            font-weight: bolder;
            font-size: 42px;
            animation: letter 1s cubic-bezier(0.1,0.5,0.2,1) infinite alternate;
            top: 0px;

        }

        span:nth-child(1){
            animation-delay: 0s;
        }
        span:nth-child(2){
            animation-delay: 0.1s;
        }
        span:nth-child(3){
            animation-delay: 0.2s;
        }
        span:nth-child(4){
            animation-delay: 0.3s;
        }
        span:nth-child(5){
            animation-delay: 0.4s;
        }
        span:nth-child(6){
            animation-delay: 0.5s;
        }
        span:nth-child(7){
            animation-delay: 0.6s;
        }

        @keyframes letter{
            from{
                top: 0px;
                text-shadow: blanchedalmond 0 0 0.05em;
            }
            to{
                top: 30px;
                text-shadow: blanchedalmond 0 1em 0.2em;
            }
        }
    </style>
    <script src="${pageContext.request.contextPath}/base/js/jquery-1.11.3.min.js"></script>
    <script src="${pageContext.request.contextPath}/base/plugins/layui-v2.4.3/layui/layui.js"></script>
    <script type="text/javascript">

        /*$(function () {
            var layer;
            layui.use(['layer', 'form'], function(){
                layer = layui.layer
            });
            $("button").click(function () {
                if ($("#signup_email").val() == "" || $("#signup_password").val() == "") {
                    layer.msg('账号密码不能为空');
                }
                else {
                    $("#sign_form").submit()
                }
            });
        });*/
        $(function () {
            var layer;
            layui.use(['layer', 'form'], function(){
                layer = layui.layer
            });
            $(document).keydown(function(event){
                if(event.keyCode == '13'){
                    $("button").click();
                }
            });
            $("button").click(function () {
                if ($("#signup_email").val() == "" || $("#signup_password").val() == "") {
                    layer.msg('账号密码不能为空');
                }else if($("#signup_verify").val() == ""){
                    layer.msg('验证码不能为空');
                }else {
                    $("#sign_form").submit()
                }
            });
            $(".img_change").click(function changeCode(){
                $("#validateCodeImg").attr("src","<%=basePath%>/validateCode.shtml?data=" + new Date() + Math.floor(Math.random()*24));
            })


        });
    </script>
</head>
<body>
<div class="demo-2">
    <div class="">
        <div id="large-header" class="large-header">
            <canvas id="demo-canvas"></canvas>

        </div>
    </div>
</div>
<div class="container">
    <div class="from-title">
        <span>预&nbsp;</span>
        <span>付&nbsp;</span>
        <span>费&nbsp;</span>
        <span>管&nbsp;</span>
        <span>理&nbsp;</span>
        <span>系&nbsp;</span>
        <span>统&nbsp;</span>
    </div>
    <div class="signup_forms">
        <div id="signup_forms_container" class="signup_forms_container">
            <form class="signup_form_form" id="sign_form" method="post" action="${pageContext.request.contextPath}/login">
                <div class="signup_account" id="signup_account">
                    <div class="form_user"><input type="text" name="username" placeholder="账号" id="signup_email"></div>
                    <div class="form_password"><input type="password" name="password" placeholder="密码" id="signup_password"></div>
                    <div id="form_verify">
                        <input type="text" name="validateCode" placeholder="验证码" id="signup_verify" maxlength="4" />
                        <div id="img_box">
                            <img id="validateCodeImg" src="<%=basePath%>/validateCode.shtml" />
                            <a href="#" class="img_change">看不清？换一张</a>
                        </div>
                    </div>
                </div>

                <button type="button" id="signup_forms_submit"><p><strong>进&nbsp;&nbsp;&nbsp;&nbsp;入</strong></p></button>

            </form>

        </div>

    </div>
    <div class="footer">

    </div>

</div>
<script src="${pageContext.request.contextPath}/js/login.js"></script>
</body>
</html>
